<template>
  <div class="rank_class">
    <div class="rank_main">
      <RanklistItem v-if="rankList[0] && rankList[0].id" :rankId="rankList[0].id"></RanklistItem>
      <RanklistItem v-if="rankList[1] && rankList[1].id" :rankId="rankList[1].id"></RanklistItem>
      <RanklistItem v-if="rankList[2] && rankList[2].id" :rankId="rankList[2].id"></RanklistItem>
      <RanklistItem v-if="rankList[3] && rankList[3].id" :rankId="rankList[3].id"></RanklistItem>
      <RanklistItem v-if="rankList[4] && rankList[4].id" :rankId="rankList[4].id"></RanklistItem>
      <RanklistItem v-if="rankList[5] && rankList[5].id" :rankId="rankList[5].id"></RanklistItem>
    </div>
    <div class="play_list">
      <h4>全球榜</h4>
      <MusicList :muiscList="rankList.slice(6)"></MusicList>
    </div>
  </div>
</template>

<script>
import { _getRanklist } from '../../network/recommend'
import RanklistItem from './children/RanklistItem'
import MusicList from '../../components/content/muisc-list/MuiscList.vue'
export default {
  name: 'Ranklist',
  data() {
    return {
      rankList: [] // 歌手列表
    }
  },
  components: { RanklistItem, MusicList },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await _getRanklist()
      this.rankList = res.data.list
    }
  }
}
</script>

<style lang="less" scoped>
.rank_class {
  width: 80%;
  height: 400px;
  margin: 0 auto;
  .rank_main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 30px;
  }
}
</style>
